<template>
  <div class="box_right">
    <p>您好,{{ inf.name }}</p>
    <div class="use">
      <div class="use_left">
        <div class="use_left2">
          <div class="g1">个人资料</div>
          <router-link to="/user/useredit" class="g2">编辑</router-link>
        </div>
        <div class="use_left22">
          <div class="use_left3">
            <span class="s1">姓名</span>
            <span class="s2">{{ inf.name }}</span>
          </div>
          <div class="use_left3">
            <span class="s1">电话</span>
            <span class="s2">{{ inf.tel }}</span>
          </div>
          <div class="use_left3">
            <span class="s1">性别</span>
            <span class="s2">{{ inf.sex }}</span>
          </div>
          <div class="use_left3">
            <span class="s1">生日</span>
            <span class="s2">{{ inf.birthday }}</span>
          </div>
        </div>
      </div>
      <div class="use_right">
        <div class="use_right2">
          <div class="g11">默认收货地址</div>
          <routerLink to="/user/addressedit" class="g22">编辑</routerLink>
        </div>
      </div>
    </div>
    <div class="bag-bottom">
      <img src="../../public/images/user/bag.jpg" alt="" />
      <div class="texts">
        <p>来AIBU，一起爱步一下</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "@vue/reactivity";
import { $get, $post } from "../../request/index";
let account = localStorage.getItem("username")
let inf = reactive({
  tel:"",
  name:"",
  sex:"",
  birthday:"",
})
$get("/edit/renderUser",{account}).then(backData=>{
  inf.tel=backData.data.tel
  inf.name=backData.data.name
  inf.sex=backData.data.sex
  const bir = (backData.data.birthday).slice(5)
  inf.birthday=bir

})
</script>

<style lang="less">
.box_right {
  font-weight: 700;
  font-size: 24px;
  color: #616265;
}

.box_right .mt {
  margin-top: 10px;
  font-size: 20px;
  line-height: 20px;
}

.box_right div span {
  font-weight: lighter;
  margin-left: 15px;
}

.box_right .mt .img2 {
  margin-left: 15px;
}

.use {
  width: 1220px;
  height: 278px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  margin-top: 20px;
}

.use_left {
  width: 600px;
  height: 278px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.use_right {
  width: 600px;
  height: 278px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.use_left2,
.use_right2 {
  height: 36px;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;

  a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
  }
}

.g1,
.g11 {
  color: #000;
  padding-left: 30px;
}

.g2,
.g22 {
  font-size: 16px;
  cursor: pointer;
  color: #000;
  font-weight: lighter;
  padding-right: 30px;
}

.use_left22 {
  margin-top: 40px;
}

.use_left3 {
  padding-left: 30px;
}

.s1 {
  margin-right: 60px;
  font-size: 16px;
  font-weight: bolder !important;
  color: #000;
}

.s2 {
  font-size: 16px;
  font-weight: lighter;
}

.bag-bottom {
  width: 1220px;
  height: 378px;
  position: relative;
  margin-top: 20px;
}

.bag-bottom img {
  width: 1220px;
}

.texts {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.texts p {
  color: white;
  font-weight: lighter;
  font-size: 20px;
}

.banner2 {
  width: 1520px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.p11 {
  line-height: 18px;
  font-weight: 600;
  color: #000;
}

.p22 {
  color: #515151;
  margin-top: 8px;
}
</style>